// -------top 菜 单 吸 顶 效 果 ---------------
var $top = $(".header_ul1");
var $top_ul = $(".header_ul1>ul");
var $img = $(".imgli");

$(window).on("scroll", function () {
      antishake(100);
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop > 42) {
            $top.css({
                  "position": "fixed",
                  "top": "0",
                  "height": "56px",
                  "lineHeight": "56px",
            });
            $top_ul.css({ "height": "56px" });
            $img.css({
                  "display": "inline-block",
                  "position": "absolute",
                  "left": 0
            })
      } else {
            $top.css({
                  "position": "static",
                  "height": "42px",
                  "lineHeight": "42px",
            });
            $top_ul.css({ "height": "42px" });
            $img.css({ "display": "none" })
      }

})

var antishake = (function () {
      var t = null;
      return function (daley) {
            clearTimeout(t);
            t = setTimeout(() => {
                  // console.log("函数防抖封装");
            }, daley);
      }
})();

//  联系我们
var $shop_li = $(".header_shop");
var $goshop = $(".goshop");
$shop_li.on("mouseover", function () {

      $goshop.show();
})
$goshop.on("mouseover", function () {
      $goshop.show();
})
$goshop.on("mouseout", function () {

      $goshop.hide();
})
$shop_li.on("mouseout", function () {

      $goshop.hide();
})
//内容区域
//放大镜
function Magnifier() {
      // 创建设计好程序需要的数据
      // 小图元素; 
      this.small_img_wrapper = document.querySelector(".small-img");
      // 焦点元素; 
      this.focus = document.querySelector(".focus");
      // 大图焦点元素; 
      this.big_img_focus = document.querySelector(".big-img");
      // 大图图片 ; 
      this.big_img = this.big_img_focus.querySelector("img");

      // 所有内容的容器 :
      this.container = document.querySelector(".content1_left");
      // 分页器之中的按钮 : 
      this.pagination_bullets = document.querySelectorAll(".paginaion img");
      // 选择小图图片 ; 
      this.small_img = document.querySelector(".small-img img");

      // 创建图片数据 : 
      this.img_list = [
            {
                  small: "https://www.uniqlo.cn/hmall/test/u0000000022951/main/first/1000/1.jpg",
                  big: "https://www.uniqlo.cn/hmall/test/u0000000022951/main/first/1000/1.jpg"
            },
            {
                  small: "https://www.uniqlo.cn/hmall/test/u0000000022951/main/other1/1000/2.jpg",
                  big: "https://www.uniqlo.cn/hmall/test/u0000000022951/main/other1/1000/2.jpg"
            },
            {
                  small: "https://www.uniqlo.cn/hmall/test/u0000000022951/main/other2/1000/3.jpg",
                  big: "https://www.uniqlo.cn/hmall/test/u0000000022951/main/other2/1000/3.jpg"
            },
            {
                  small: "https://www.uniqlo.cn/hmall/test/u0000000022951/main/other3/1000/4.jpg",
                  big: "https://www.uniqlo.cn/hmall/test/u0000000022951/main/other3/1000/4.jpg"
            }

      ]

      // 获取到容器的偏移; 
      this.container_offset = {
            left: this.container.offsetLeft,
            top: this.container.offsetTop
      }
      // 获取focus的宽高; 

      this.focus_style = getComputedStyle(this.focus);
}
// 绑定事件; 
Magnifier.prototype.bindEvent = function () {
      // 给小图绑定事件; 
      var instance = this;
      // 鼠标移入小图，应该让小图焦点和大图焦点同时显示; 
      this.small_img_wrapper.onmouseover = function () {
            instance.toggle("block");
      }
      // 鼠标移出小图，应该让小图焦点和大图焦点同时隐藏; 
      this.small_img_wrapper.onmouseout = function () {
            instance.toggle("none");
      }
      // 给元素绑定鼠标移动事件; 
      this.small_img_wrapper.onmousemove = function (evt) {
            // 获取鼠标的信息 : x,y 
            // 这个鼠标信息是用来让focus定位的; 
            // - 一致性 ;
            // - 定位元素的参照物 和鼠标位置的 参照 要一致; 
            var e = evt || event;
            // 如果是用 client获取鼠标的位置，那么我们需要减去 容器的左侧偏移量和上侧的偏移量; 

            instance.move(e.pageX - instance.container_offset.left, e.pageY - instance.container_offset.top);
      }
      // 给分页器添加事件 : 
      for (let i = 0; i < this.pagination_bullets.length; i++) {
            this.pagination_bullets[i].onclick = function () {
                  instance.changeItem(i);
            }
      }
}
// 切换图片显示隐藏; 
Magnifier.prototype.toggle = function (type) {
      this.focus.style.display = type;
      this.big_img_focus.style.display = type;
}
// 让图片跟随移动; 
Magnifier.prototype.move = function (x, y) {

      var _left = x - parseInt(this.focus_style.width) / 2
      var _top = y - parseInt(this.focus_style.height) / 2

      // 因为我们的焦点框不能移出到外部，所以我们要给焦点框设置边界; 

      // left 值边界 : 
      // 最小边界， 最大边界; 
      _left = _left < 0 ? 0 : _left;
      _left = _left > 265 ? 265 : _left;

      _top = _top < 0 ? 0 : _top;
      _top = _top > 265 ? 265 : _top;

      this.focus.style.left = _left + "px";
      this.focus.style.top = _top + "px";

      // 大图跟随 : 
      // - left值移动的比例; 
      var _left_per = _left / 265;
      var _top_per = _top / 265;

      // 计算大图的总路程; 大图片的宽度 - 大图焦点的宽度;  
      // 求得结果 260 ; 

      this.big_img.style.left = -530 * _left_per + "px";
      this.big_img.style.top = -530 * _top_per + "px";


}

Magnifier.prototype.changeItem = function (index) {
      // dom操作 : 切换active操作
      // - 清空; 
      // - 给对应index的dom对象添加active类名; 
      for (var i = 0; i < this.pagination_bullets.length; i++) {
            this.pagination_bullets[i].className = "";
      }
      this.pagination_bullets[index].className = "active";
      // 图片切换的原理 : 更改图片的src路径; 
      // - 当我们写到这里的时候我们尴尬的发现，我们并没有数据可以去给img的src赋值; 
      // - 我们可以把缺少的src路径提前准备好; 

      this.small_img.src = this.img_list[index].small;
      this.big_img.src = this.img_list[index].big;

}
var m = new Magnifier();
// 创建一个实例对象 : 
// - 数据 ;  =>  给实例对象添加数据; 
// - 算法 ;  =>  原型之中的方法; 

// { 
//       small_img : dom, 
//       focus : dom,
//       big_img : dom, 
//       big_img_focus : dom , 
// }

m.bindEvent();
